<template>
  <div>
    <el-main>
      <el-button size="small" class="button" type="danger" @click="addArea">添加区域</el-button>
      <el-table :data="tableData" border style="width: 100%" size="mini" class="two">
        <el-table-column label="模板类型" width="180">
          <template v-slot="{row}">
            <span v-if="row.templateType === 1">同城寄</span>
            <span v-if="row.templateType === 2">省内寄</span>
            <span v-if="row.templateType === 3">经济区互寄</span>
            <span v-if="row.templateType === 4">跨省</span>
          </template>
        </el-table-column>
        <el-table-column label="运送类型">
          <template v-slot="{row}">
            <span v-if="row.transportType === 1">普快</span>
            <span v-if="row.transportType === 2">特快</span>
          </template>
        </el-table-column>
        <el-table-column label="关联城市">
          <template v-slot="{row}">
            <span v-if="row.associatedCityList[0] === '1'">全国</span>
            <span v-if="row.associatedCityList[0] === '2'">京津冀</span>
            <span v-if="row.associatedCityList[0] === '3'">江浙沪</span>
            <span v-if="row.associatedCityList[0] === '4'">川渝</span>
            <span v-if="row.associatedCityList[0] === '5'">黑吉辽</span>
            <span v-else> {{ row.associatedCityList[0] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="firstWeight" label="首重" />
        <el-table-column prop="continuousWeight" label="续重" />
        <el-table-column prop="lightThrowingCoefficient" label="轻抛系数" />
        <el-table-column prop="address" label="操作">
          <!-- 放置操作按钮 -->
          <template v-slot="{row}">
            <el-button size="mini" type="text" @click="editCarriages(row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="delCarriages(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <!-- ================================================================ -->
    <el-dialog
      style="font-size:12px"
      :title="title"
      :visible="dialogVisible"
      width="30%"
      @close="cancel"
    >
      <el-form
        ref="buildingForm"
        :model="buildingForm"
        status-icon
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
        size="mini"
        label-position="left"
      >
        <el-form-item label="模板类型" prop="templateType">
          <el-select v-model="buildingForm.templateType" placeholder="请选择" style="width:100%">
            <el-option label="同城寄" :value="1" />
            <el-option label="省内寄" :value="2" />
            <el-option label="经济区互寄" :value="3" />
            <el-option label="跨省" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="运送类型" prop="transportType">
          <el-select v-model="buildingForm.transportType" placeholder="请选择" style="width:100%">
            <el-option label="普快" :value="1" />
            <el-option label="特快" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="* 关联城市">
          <el-checkbox-group v-if="buildingForm.templateType === 3" v-model="buildingForm.associatedCityList">
            <el-checkbox label="京津冀" value="2" name="associatedCityList">京津冀</el-checkbox>
            <el-checkbox label="江浙沪" value="3" name="associatedCityList">江浙沪</el-checkbox>
            <el-checkbox label="川渝" value="4" name="associatedCityList">川渝</el-checkbox>
            <el-checkbox label="黑吉辽" value="5" name="associatedCityList">黑吉辽</el-checkbox>
          </el-checkbox-group>
          <span v-else>全国</span>

        </el-form-item>
        <el-form-item label="首重价格" prop="firstWeight">
          <el-input v-model="buildingForm.firstWeight" />
        </el-form-item>
        <el-form-item label="续重价格" prop="continuousWeight">
          <el-input v-model="buildingForm.continuousWeight" />
        </el-form-item>
        <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
          <el-input v-model="buildingForm.lightThrowingCoefficient" />
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- ================================================================ -->
  </div>
</template>

<script>
import { getCarriagesList, postCarriagesList, delCarriages } from '@/api/jobArea'
export default {
  data() {
    return {
      tableData: [], // 运费管理列表
      title: '新增模板', // 模态框标题
      dialogVisible: false, // 控制模态框显示隐藏
      buildingForm: {
        associatedCityList: [], // 关联城市
        templateType: null, // 模板类型
        transportType: null, // 运送类型
        firstWeight: null, // 首重价格
        continuousWeight: null, // 续重价格
        lightThrowingCoefficient: null // 轻抛系数
      },
      rules: { // 表单验证
        templateType: [
          { required: true, message: '请选择模板类型', trigger: 'change' }
        ],
        transportType: [
          { required: true, message: '请选择运送类型', trigger: 'change' }
        ],
        firstWeight: [
          { required: true, message: '请输入首重价格', trigger: 'blur' }
          // { type: 'Number', message: '请输入有效的数字', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '请输入续重价格', trigger: 'blur' }
          // { type: 'Number', message: '请输入有效的数字', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '请输入轻抛系数', trigger: 'blur' }
          // { type: 'Number', message: '请输入有效的数字', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getCarriagesList()
  },
  methods: {
    // 获取运费模板列表
    async getCarriagesList() {
      const { data } = await getCarriagesList()
      this.tableData = data
    },
    // 点击退出
    cancel() {
      this.$refs.buildingForm.resetFields()
      this.dialogVisible = false
      this.getCarriagesList()
    },
    // 添加区域
    addArea() {
      this.dialogVisible = true
      this.title = '新增模板'
    },
    // 确定按钮
    async  submitForm() {
      await this.$refs.buildingForm.validate()
      // 遍历buildingForm对象的键值对
      const buildingForm = this.buildingForm
      for (const key in buildingForm) {
        if (key !== 'associatedCityList' && buildingForm[key] === null) {
          buildingForm[key] = 0 // 将null值转换为0
        } else if (key !== 'associatedCityList' && typeof buildingForm[key] === 'string') {
          buildingForm[key] = parseFloat(buildingForm[key]) // 将字符串类型的值转换为浮点数类型
        }
      }
      if (this.buildingForm.associatedCityList.length === 0) {
        this.buildingForm.associatedCityList.push('1')
      }
      delete this.buildingForm.computeWeight
      delete this.buildingForm.created
      delete this.buildingForm.expense
      delete this.buildingForm.updated

      await postCarriagesList(this.buildingForm)
      this.getCarriagesList()
      this.$message.success('操作成功')
      this.cancel()
    },
    // 编辑运费模板-数据回填
    editCarriages(id) {
      const newList = this.tableData.filter(item => item.id === id)
      this.dialogVisible = true
      this.title = '编辑模板'
      console.log(newList[0])
      this.buildingForm = newList[0]
    },
    // 删除运费模板
    async delCarriages(id) {
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delCarriages(id)
      this.getCarriagesList()
      this.$message.success('删除成功')
    }
  }
}
</script>

<style scoped>
.button{
  margin-bottom: 20px;

}

</style>
